/*
参数说明：
alertShow-弹出框参数{
  showmsg-服务器弹窗提示
  msg-服务器提示内容
}
  itemTypeList-标头Type切换数组
  subjectList-商品专题数组
bannerList-banner图片数组{
  url-图片跳转地址
  img-图片地址
  title-标题
}
方法:
getBannerList-(因组件bannerList参数固定为url、img、title所以需我们转换一次)
onShow-弹窗框弹出时触发的方法
onHide-弹窗框关闭时触发的方法
*/
<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <x-header style="background-color:#3d82e5;width:100%;position:absolute;left:0;top:0;z-index:100;" :left-options="{showBack: false}">
      <p name="content">商城</p>
      <a slot="left" href="javascript:;" style="color: #ffffff" @click="addressFn" >
        <!--<p name="leftContent">四川▼</p>-->
      </a>
      <div slot="right"  @click="searchFn" style="color: #ffffff" >
        <img  src="../../../../src/assets/images/shopMall/icon_ss_nor.png" height="20px" width="20px"/>
      </div>
    </x-header>
    <div :style="boxStyle">
      <div style="width: 100%;overflow:auto;-webkit-overflow-scrolling:touch;padding-top: 38px;">
        <tab v-if="itemTypeList.length > 0"  :animate="false" style="width:400px;height: 30px;">
          <template v-for="item in itemTypeList">
            <tab-item @click.native="specialFn(item.id)" style="color: #3d82e5" >{{item.name}}</tab-item>
          </template>
        </tab>
      </div>
      <div>
        <swiper :height=imgHw dots-position="center" auto loop>
          <swiper-item v-for="bannerList in bannerList">
            <img :src=bannerList.img alt="" style="width: 100%;" @click="fromBanner(bannerList.kind,bannerList.kindId,bannerList.url)">
          </swiper-item>
        </swiper>
      </div>
      <flexbox :gutter="0" style="background: #fff;margin-top: 10px;margin-bottom: 5px;">
        <flexbox-item>
          <p>
            <span style="padding-right: 10px;border-right: 1px solid #bcbcbc;font-size: 15px;color: #333;margin-left: 20px;font-weight: bold;">活动</span>
            <!--<span style="color: #cb1414;border: 1px solid #cb1414;margin-right: 5px;font-size: 10px;padding: 0 2px;display: inline-block;margin-left: 8px;position: relative;top: -2px;">日本游</span>-->
            <span style="font-size: 14px;line-height: 44px;padding-left: 5px;">特惠活动火热进行中</span>
          </p>
        </flexbox-item>
      </flexbox>
      <div v-for="subjectitem in subjectList">
        <div style="font-size: 0;" v-for="subjectUrl in subjectitem.url">
          <img @click="shopSpecialFn(subjectitem.id)" :src="subjectUrl"  style="width:100%;padding-top: 5px;padding-bottom: 5px" alt="专题图片">
        </div>
      </div>
      <!--<div style="text-align: center;padding:20px">-->
        <!--<divider style="color: #333333">商城</divider>-->
      <!--</div>-->
      <flexbox :gutter="0" style="background: #fff;margin-top: 5px;margin-bottom: 10px;">
        <flexbox-item>
          <p>
            <span style="padding-right: 10px;border-right: 1px solid #bcbcbc;font-size: 15px;color: #333;margin-left: 20px;font-weight: bold;">精选</span>
            <!--<span style="color: #cb1414;border: 1px solid #cb1414;margin-right: 5px;font-size: 10px;padding: 0 2px;display: inline-block;margin-left: 8px;position: relative;top: -2px;">日本游</span>-->
            <span style="font-size: 14px;line-height: 44px;padding-left: 5px;">中老年专享的精致好物</span>
          </p>
        </flexbox-item>
      </flexbox>
      <div style="text-align: center;font-size: 0;">
        <div>
          <img @click="shopListFn(1)" src="../../../../src/assets/images/shopMall/shopMainimg1.jpg" style="width:100%;">
        </div>
        <div style="margin-top: 10px;margin-bottom: 20px">
          <img @click="shopListFn(2)" src="../../../../src/assets/images/shopMall/shopMainimg2.jpg" style="width:100%;">
        </div>
      </div>
    </div>

  </div>
</template>



<script>
  import { Swiper, Tab, TabItem, Card, Flexbox, FlexboxItem, FormPreview, XButton, Alert, Divider, XHeader, SwiperItem } from 'vux'
  import YqHeader from '../../../components/YqHeader.vue'
  import * as types from '../../../store/types'
  import * as urls from '../../../api/urls'

  export default {
    components: {
      Swiper,
      Tab,
      TabItem,
      YqHeader,
      Card,
      Flexbox,
      FlexboxItem,
      FormPreview,
      XButton,
      Alert,
      Divider,
      XHeader,
      SwiperItem
    },
    mounted: function () {
      document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'hidden'
      this.boxStyle = 'overflow-x: hidden;overflow-y: auto;height: ' + (document.body.clientHeight - 38) + 'px;'
      let width = document.body.clientWidth
      let heigth = (parseInt(width) / 100) * 60
      this.imgHw = heigth + 'px'
      if (this.$store.state.userInfo.id === '' || this.$store.state.userInfo.id === null || this.$store.state.userInfo.id === undefined) {
        this.userId = this.getQueryString('userId')
        if (this.userId !== '' && this.userId !== null && this.userId !== undefined) {
          this.$store.commit(types.USER_INFO, {id: this.userId})
          this.getBannerList()
          this.getItemTypeList()
        } else {
          let url = this.$store.state.empower.url
          window.location.href = url + '/api/wxAuth/index?type=t1'
        }
      } else {
        this.userId = this.$store.state.userInfo.id
        this.getBannerList()
        this.getItemTypeList()
      }
      this.weixinfn31()
    },
    data () {
      return {
        demo06_index: 0,
        index: 0,
        demo2: '美食',
        list2: ['精选', '美食', '电影', '酒店', '外卖'],
        boxStyle: '',
        userId: '',
        alertShow: {
          showmsg: false,
          msg: ''
        },
        imgHw: '',
        itemTypeList: [],
        subjectList: [],
        bannerList: [],
        pic: ['https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg', 'https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg', 'https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg']
      }
    },
    methods: {
      fromBanner (kind, kindId, url) {
        if (kind === 1) {
//          console.log('商品详情')
          window.localStorage.setItem('shopId', kindId)
          let userId = this.$store.state.userInfo.id
          window.localStorage.setItem('userId', userId)
          this.$router.push({
            path: '/ShopInfo'
          })
          this.$router.go(1)
        }
        if (kind === 2) {
//          console.log('分类专题详情')
          this.$router.push({
            path: '/typeSpecial',
            query: {
              id: kindId
            }
          })
          this.$router.go(1)
        }
        if (kind === 3) {
//          console.log('自定义专题详情')
          this.$router.push({
            path: '/shopSpecial',
            query: {
              id: kindId
            }
          })
          this.$router.go(1)
        }
        if (kind === 4) {
//          console.log('无跳转')
        }
        if (kind === 5) {
//          console.log('其他')
          window.location.href = url
        }
      },
      weixinfn31 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      },
      demo06_onIndexChange (index) {
        this.demo06_index = index
      },
      getBannerList () {
        this.$root.$el.__vue__.setSel()
        let userId = this.$store.state.userInfo.id
        let that = this
        this.http(urls.shopBanner, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data.list.length !== 0) {
              for (let i = 0; i < res.data.list.length; i++) {
                let bannerObj = {}
                bannerObj.url = res.data.list[i].forwardUrl
                bannerObj.img = res.data.list[i].bannerUrl
                bannerObj.kind = res.data.list[i].kind
                bannerObj.kindId = res.data.list[i].kindId
                that.bannerList.push(bannerObj)
              }
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      getItemTypeList () {
        let that = this
        this.http(urls.shopItemType, {}, function (res) {
          if (res.status === 100) {
            if (res.data.subjectListTop.length !== 0) {
              that.itemTypeList = res.data.subjectListTop
            }
            if (res.data.subjectListButtum.length !== 0) {
              that.subjectList = res.data.subjectListButtum
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      specialFn (id) {
        this.$nextTick(function () {
          document.getElementsByClassName('vux-tab-selected')[0].style.borderBottom = '2px solid #3d82e5 !important;'
          this.$router.push({
            path: '/typeSpecial',
            query: {
              id: id
            }
          })
          this.$router.go(1)
        })
      },
      shopSpecialFn (id) {
        this.$router.push({
          path: '/shopSpecial',
          query: {
            id: id
          }
        })
        this.$router.go(1)
      },
      addressFn () {
        this.$router.push({
          path: '/ChinaAddress'
        })
        this.$router.go(1)
      },
      searchFn () {
        this.$router.push({
          path: '/SearchShop'
        })
        this.$router.go(1)
      },
      shopListFn (shopType) {
        this.$router.push({
          path: '/shoppingMall/serviceShopList',
          query: {
            shopType: shopType
          }
        })
        this.$router.go(1)
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      },
      getQueryString (name) {
        let userId = window.location.href.substr('userId='.length + window.location.href.indexOf('?') + 1, window.location.href.length)
        return userId
      }
    }
  }
</script>
<style scoped="scoped">
  .vux-tab .vux-tab-item{
    line-height: 30px !important;
  }
  .vux-tab .vux-tab-item.vux-tab-selected{
    border-bottom: 2px solid #3d82e5 !important;
  }
</style>
